<!--旭日图-->
<template>
<!--    <div id="main" :style="{width: '100%', height: '600px',margin:'20px auto'}"></div>-->
    <div id="main" :style="{width: '100%', height: '700px',margin:'20px auto'}"></div>
</template>

<script>
    import request from "../utils/request";

    var echarts = require('echarts');

    export default {
        name: "BookClassification",
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 5,
                total: 0,
                tableData: [],
                data1: [],
                data2: [6, 7, 9, 43, 352],
            };
        },
        created() {
            console.log("created")
        },
        methods: {
            initCharts () { //转成旭日图所需要的数据结构：树形结构
                let _ = require('lodash')
                var keys=['type1','type2','star','bookName'];

                request.get("/bookClassification",{ // 请求/bookClassification接口
                    params: {
                        pageNum: 1,
                        pageSize: 100,
                        search: ''
                    }
                }).then(res=>{
                    console.log(res);
                    var record= res.data.records;
                    //调用iterator函数构造重构数据
                    console.log(record)
                    var sunburstData= iterator(0,null,record);
                    // console.log('fun');
                    // console.log(sunburstData);
                    this.data1 = sunburstData;


                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
                    var bgColor = '#2E2733';
                    // var bgColor = '#D6E8ED';

                    var itemStyle = {
                        star5: {
                            color: colors[0]
                        },
                        star4: {
                            color: colors[1]
                        },
                        star3: {
                            color: colors[2]
                        },
                        star2: {
                            color: colors[3]
                        }
                    };

                    this.data1[0]['itemStyle']={color: colors[1]};
                    this.data1[1]['itemStyle']={color: colors[2]};

                    console.log("data1")
                    console.log(this.data1)

                    var data = this.data1

                    for (var j = 0; j < data.length; ++j) {
                        var level1 = data[j].children;
                        for (var i = 0; i < level1.length; ++i) {
                            var block = level1[i].children;
                            var bookScore = [];
                            var bookScoreId;
                            for (var star = 0; star < block.length; ++star) {
                                var style = (function (name) {
                                    switch (name) {
                                        case '5☆':
                                            bookScoreId = 0;
                                            return itemStyle.star5;
                                        case '4☆':
                                            bookScoreId = 1;
                                            return itemStyle.star4;
                                        case '3☆':
                                            bookScoreId = 2;
                                            return itemStyle.star3;
                                        case '2☆':
                                            bookScoreId = 3;
                                            return itemStyle.star2;
                                    }
                                })(block[star].name);

                                block[star].label = {
                                    color: style.color,
                                    downplay: {
                                        opacity: 0.5
                                    }
                                };

                                if (block[star].children) {
                                    style = {
                                        opacity: 1,
                                        color: style.color
                                    };
                                    block[star].children.forEach(function (book) {
                                        book.value = 1;
                                        book.itemStyle = style;

                                        book.label = {
                                            color: style.color
                                        };

                                        var value = 1;
                                        if (bookScoreId === 0 || bookScoreId === 3) {
                                            value = 5;
                                        }

                                        if (bookScore[bookScoreId]) {
                                            bookScore[bookScoreId].value += value;
                                        }
                                        else {
                                            bookScore[bookScoreId] = {
                                                color: colors[bookScoreId],
                                                value: value
                                            };
                                        }
                                    });
                                }
                            }

                            level1[i].itemStyle = {
                                color: data[j].itemStyle.color
                            };
                        }
                    }

                    option = {
                        title: {
                            text: '书籍分类旭日图',
                            subtext: '数据来自牛客网',
                            textStyle: {
                                color: 'white',
                            },
                            x: 'center',
                        },
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 10,
                            right: 80,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        backgroundColor: bgColor,
                        color: colors,
                        series: [{
                            type: 'sunburst',
                            center: ['50%', '48%'],
                            data: data,
                            sort: function (a, b) {
                                if (a.depth === 1) {
                                    return b.getValue() - a.getValue();
                                }
                                else {
                                    return a.dataIndex - b.dataIndex;
                                }
                            },
                            label: {
                                rotate: 'radial',
                                color: bgColor
                            },
                            itemStyle: {
                                borderColor: bgColor,
                                borderWidth: 2
                            },
                            levels: [{}, {
                                r0: 0,
                                r: 40,
                                label: {
                                    rotate: 0
                                }
                            }, {
                                r0: 40,
                                r: 105
                            }, {
                                r0: 115,
                                r: 140,
                                itemStyle: {
                                    shadowBlur: 2,
                                    shadowColor: colors[2],
                                    color: 'transparent'
                                },
                                label: {
                                    rotate: 'tangential',
                                    fontSize: 10,
                                    color: colors[0]
                                }
                            }, {
                                r0: 140,
                                r: 145,
                                itemStyle: {
                                    shadowBlur: 80,
                                    shadowColor: colors[0]
                                },
                                label: {
                                    position: 'outside',
                                    textShadowBlur: 5,
                                    textShadowColor: '#333'
                                },
                                downplay: {
                                    label: {
                                        opacity: 0.5
                                    }
                                }
                            }]
                        }]
                    };

                    option && myChart.setOption(option);

                });


                function iterator(i,parent,data){
                    // console.log(data)
                    var datasArr=[];
                    // if(i<keys.length-2){
                    if(i<keys.length-1){
                        var section,childData;
                        if(i!==0 && parent !==null){
                            childData=_.filter(data,function(obj){return obj[keys[i-1]]===parent});
                            section= _.uniq(_.map(childData,function(obj){ return  obj[keys[i]];}));
                            _.each(section,function(val){
                                datasArr.push({
                                    name:val,
                                    children:iterator(i+1,val,childData)
                                });
                            });
                        }else{
                            section= _.uniq(_.map(data,function(obj){ return  obj[keys[i]];}));
                            _.each(section,function(val){
                                datasArr.push({
                                    name:val,
                                    children:iterator(i+1,val,data)
                                });
                            });
                        }
                        return datasArr;
                    }else{
                        childData=_.filter(data,function(obj){return obj[keys[i-1]]===parent});
                        _.each(childData,function(obj,index){
                            datasArr.push({
                                name:obj.bookName
                                // name:obj.star,
                                // value:obj.bookName
                            });
                        });
                        return datasArr;
                    }
                }
            },

        },

        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>

<!--旭日图所需的数据结构如下：-->
<!--<script>-->
<!--    [-->
<!--        {-->
<!--            "name": "科普",-->
<!--            itemStyle: {-->
<!--                color: colors[1]-->
<!--            },-->
<!--            "children": [-->
<!--                {-->
<!--                    "name": "其他",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "时间简史"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "未来简史"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "编码"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "众病之王"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "统计数字会撒谎"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "程序是怎样跑起来的"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "数学之美"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "猫咪家庭医学大百科"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "钨舅舅"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "人类简史"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "果壳中的宇宙"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "细胞生命的礼赞"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "上帝掷骰子吗"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "完全图解猫的心理"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "有限与无限的游戏"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                }-->
<!--            ]-->
<!--        },-->
<!--        {-->
<!--            "name": "专业",-->
<!--            itemStyle: {-->
<!--                color: colors[2]-->
<!--            },-->
<!--            "children": [-->
<!--                {-->
<!--                    "name": "互联网",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "图解HTTP"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "人人都是产品经理"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "运营之光"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "计算机网络（第4版）"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "编程",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "剑指Offer"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "Java编程思想 （第4版）"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "深入理解Java虚拟机（第2版）"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "算法（第4版）"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "科学",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "算法笔记"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "系统化思维导论（银年纪念版）"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "深入浅出统计学"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "生物学"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "好奇心"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "交互设计",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "用户至上"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "设计心理学"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "HTML5"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "用户体验",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "Excel图表之道"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "Digital Experience Design"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "Designing for Emerging Technologies"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "Design Is How It Works"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "算法",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "软件测试"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "机器学习"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "深度学习"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "统计学习方法"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "科技",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "具体数学"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "上帝掷骰子吗?"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "C语言程序设计"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "下一个倒下的会不会是华为"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "web",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "JavaScript权威指南"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "鸟哥的Linux私房菜"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "CSS"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "Vue.js权威指南"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "UE",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "脚本驱动的应用软件开发方法与实践"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "界面设计"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "jQuery UI 1.7"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "Windows用户界面设计与优化策略"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "交互",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "JavaScript"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "全景探秘游戏设计艺术"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "失控"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "通信",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "计算机网络"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "微型计算机原理与应用"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "TCP/IP协议族"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "IMS"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "UCD",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "引爆点"-->
<!--                                },-->
<!--                                {-->
<!--                                    "name": "产品经理手册"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "顾客为什么购买"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "神经网络",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "数学之美 （第二版）"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "Deep Learning"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "TensorFlow深度学习"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                },-->
<!--                {-->
<!--                    "name": "程序",-->
<!--                    "children": [-->
<!--                        {-->
<!--                            "name": "4☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "算法导论"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "5☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "现代操作系统（第3版）"-->
<!--                                }-->
<!--                            ]-->
<!--                        },-->
<!--                        {-->
<!--                            "name": "3☆",-->
<!--                            "children": [-->
<!--                                {-->
<!--                                    "name": "精通Spring"-->
<!--                                }-->
<!--                            ]-->
<!--                        }-->
<!--                    ]-->
<!--                }-->
<!--            ]-->
<!--        }-->
<!--    ]-->
<!--</script>-->